<template>
  <div>
    <router-view>
      <div v-if="details">
        <el-card class="box-card">
          <template #header>
            <div style="font-size: 20px; font-weight: 600">
              <span>用户管理</span>
            </div>
            <div style="height: 2vh"></div>
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center">
                <el-input
                  v-model="input"
                  placeholder="输入用户名称"
                  clearable
                  style="width: 250px"
                  @input="docsearch"
                />
                <div style="width: 8px"></div>
              </div>
            </div>
            <!--  -->
          </template>
          <div>
            <el-table
              ref="multipleTableRef"
              style="width: 100%"
              stripe
              :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
              v-loading="loading"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" property="id" width="60" align="center" fixed />
              <el-table-column label="用户名称" property="nickname" align="center" fixed />
              <el-table-column property="card" label="头像" width="140" align="center">
                <template #default="{ row }">
                  <el-image
                    style="width: 50px; height: 50px; border-radius: 5px"
                    :src="url + row.avatar"
                    :preview-src-list="url + row.avatar"
                    :initial-index="4"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    fit="cover"
                  />
                </template>
              </el-table-column>
              <el-table-column property="tel" label="手机号" show-overflow-tooltip align="center" />
              <el-table-column
                property="status"
                label="是否开启"
                show-overflow-tooltip
                align="center"
              >
                <template #default="{ row }">
                  <div :style="{ color: row.status == 1 ? '#A0CFFF' : '#cecece' }">
                    {{ row.status == 1 ? '·已开启' : '·已关闭' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                property="create_time"
                label="添加时间"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column fixed="right" label="操作" width="120" align="center">
                <template #default="scope">
                  <el-button type="primary" plain size="small" @click="targets(scope.row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="height: 1vh"></div>
            <div style="display: flex; justify-content: center">
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[10, 20, 50, 100]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="!details">
        <div style="width: 100%; height: 40px">
          <el-button type="primary" :icon="ArrowLeftBold" @click="details = true">返回</el-button>
        </div>
        <el-card style="width: 100%; height: auto; min-height: 100vh">
          <template #header>
            <div style="font-size: 20px; font-weight: 600">
              <span>用户详情</span>
            </div>
          </template>
          <div class="details_head">
            <div class="head_name"
              >用户名称 <text>{{ user_data.nickname }}</text>
            </div>
            <div class="head_tel"
              >用户手机号<text>{{ user_data.tel }}</text></div
            >
            <div class="head_image"
              >用户头像
              <el-image
                style="width: 50px; height: 50px; border-radius: 100%"
                :src="url + user_data.avatar"
              ></el-image>
            </div>
          </div>
          <div class="details_list">
            <el-table :data="user_data.visit" style="width: 100%">
              <el-table-column prop="nickname" label="姓名" align="center" />
              <el-table-column prop="card" label="就诊卡号" align="center" />
              <el-table-column prop="code" label="身份证号" align="center" />
              <el-table-column prop="tel" label="手机号" align="center" />
              <el-table-column prop="sex" label="性别" align="center" >
                <template #default="{ row }">
                  {{ row.sex == 1 ? '男' : '女' }}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="地址" align="center"/>
              <el-table-column prop="relationship" label="关系" align="center" />
              <el-table-column prop="money" label="余额" align="center"/>
              <el-table-column prop="datetime" label="创建时间" align="center"/>
            </el-table>
          </div>
        </el-card>
      </div>
    </router-view>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { user } from '@/api/prople';
  import { ArrowLeftBold } from '@element-plus/icons-vue';

  const multipleTableRef = ref();
  const url = ref('https://lxt.jingyi.icu');
  const input = ref('');
  const tableData = ref([]);
  const currentPage4 = ref(1);
  const pageSize4 = ref(10);
  const datesearch = ref([]);
  const loading = ref(true);
  const selectedRows = ref([]); // 存储选中的行数据
  const details = ref(true);
  const user_data = ref({}); //用户详细

  payment();
  function payment() {
    user().then((res) => {
      console.log(res);
      tableData.value = res.data;
      datesearch.value = res.data;
      loading.value = false;
    });
  }
  function docsearch() {
    console.log(input.value);
    console.log(datesearch.value);
    let doctor = [];
    if (input.value != '' || input.value != undefined) {
      const doctorData = datesearch.value.filter((depart) => depart.nickname.includes(input.value));
      console.log(doctorData);
      doctor.push(...doctorData);
      tableData.value = doctor;
    } else {
      tableData.value = datesearch.value;
    }
  }
  const handleSelectionChange = (val) => {
    selectedRows.value = val;
  };
  const targets = (item) => {
    console.log(item);
    user_data.value = item;
    details.value = false;
  };
</script>
<style scoped>
  .top_navigate {
    display: flex;
    align-items: center;
  }

  .blue_ycy {
    width: 32px;
    height: 8px;
    background-color: #006eff;
    border-radius: 20px;
    margin-right: 10px;
  }

  .font_size {
    font-size: 20px;
  }

  .m-2 {
    width: 120px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #006eff;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 100%;
  }

  .user_inp {
    width: 33.33%;
    display: flex;
    align-items: center;
  }

  .arrow {
    width: 96%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 3%;
    height: 7vh;
  }

  .details_head {
    width: 100%;
    height: 100px;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
  }

  .details_head div {
    margin-right: 160px;
    margin-left: 40px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .details_head text {
    color: #9c9c9c;
    margin-left: 20px;
  }

  .el-image {
    margin-left: 20px;
  }

  .details_list {
    width: 100%;
    height: 65vh;
  }
</style>
